<template>
    <!-- 添加按钮 -->
    <div class="tools-div">
        <el-button type="success" size="small" @click="addShow">添 加</el-button>
    </div>

    <!-- 新增或者修改对话框 -->
    <el-dialog v-model="dialogVisible" title="添加或修改" width="30%">
    <el-form label-width="120px">
        <el-form-item label="品牌名称">
            <el-input v-model="brand.name"/>
        </el-form-item>
        <el-form-item label="品牌图标">
            <el-upload
                       class="avatar-uploader"
                       action="http://localhost:8501/admin/system/fileUpload"
                       :show-file-list="false"
                       :on-success="handleAvatarSuccess"
                       :headers="headers"
                       >
                <img v-if="brand.logo" :src="brand.logo" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="saveOrUpdate">提交</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
    </el-form>
</el-dialog>

    <!-- 数据表格展示 -->
    <el-table :data="list" style="width: 100%">
        <el-table-column prop="name" label="品牌名称" />
        <el-table-column prop="logo" label="品牌图标" #default="scope">
            <img :src="scope.row.logo" width="50" />
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="操作" align="center" width="200" #default="scope">
            <el-button type="primary" size="small" @click="editShow(scope.row)">
                修改
            </el-button>
            <el-button type="danger" size="small" @click="romove(scope.row.id)">
                删除
            </el-button>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
               v-model:current-page="pageParams.page"
               v-model:page-size="pageParams.limit"
               :page-sizes="[5,10, 20, 50, 100]"
               layout="total, sizes, prev, pager, next"
               :total="total"
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               />

</template>

<script setup>
import { ref ,onMounted} from 'vue'
import {GetBrandPageList,SaveBrand,UpdataBrandById,DeleteBrandById} from '@/api/brand'
import { useApp } from '@/pinia/modules/app'
import { ElMessage,ElMessageBox } from 'element-plus'

//删除
const romove=(id)=>{

    //提示框
    ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
  .then(async()=>{
    const{code} =await DeleteBrandById(id)
    //判断
    if(code===200){
    //提示
     ElMessage.success("删除成功")
    //刷新
    fetchData()
    }


  })
  .catch(()=>{
    ElMessage.info("取消删除")

  })


}

//修改实现
const updateData= async()=>{
     //请求
     const {code} =await UpdataBrandById(brand.value)
    //判断
    if(code===200){
     //提示
     ElMessage.success("修改成功")
    //关窗
    dialogVisible.value=false
    //刷新
    fetchData()
    }



}
//修改回显
const editShow=(row)=>{
    

    //回显数据
    brand.value=row
    //窗口显示
    dialogVisible.value=true


}





//新增实现

//定义新增事件方法
const saveData= async()=>{
    //请求
    const {code} =await SaveBrand(brand.value)
    //判断
    if(code===200){
     //提示
     ElMessage.success("新增成功")
    //关窗
    dialogVisible.value=false
    //刷新
    fetchData()
    }

   


}


//提交方法
const saveOrUpdate=()=>{
    //判断
    if(!brand.value.id){
        saveData()
    }else{
        updateData()
    }

}





//实现文件上传
//定义携带的token 头信息
const headers=ref({

    token: useApp().authorization.token
})
//上传成功的方法
const handleAvatarSuccess=(res)=>{

    //给brand中的logo赋值
    brand.value.logo=res.data
}



//新增处理
//定义控制对话框显示的变量
const dialogVisible=ref(false)
//定义新增窗口显示方法
const  addShow=()=>{
    brand.value={}
    dialogVisible.value=true

}
//定义数据模型
const defaultFormParam={
    id:'',
    name:'',
    logo: ''
}
const brand =ref(defaultFormParam)


//分页处理
const handleSizeChange=()=>{

    //刷新页面
    fetchData()

}
const handleCurrentChange=()=>{

//刷新页面
fetchData()

}

//列表显示

//页面挂载后获取数据
onMounted(()=>{
    fetchData()

})

//定义分页数据模型
const defaultPageParam={
    page:1,
    limit:5

}
const pageParams=ref(defaultPageParam)
// 分页条数据模型
const total = ref(0)

// 定义表格数据模型
const list = ref([])
//定义分页查询方法
const fetchData= async()=>{

    //请求后端接口
    const {data} =await GetBrandPageList(pageParams.value.page,pageParams.value.limit)

    //赋值数据
    list.value=data.list
    //赋值总记录数
    total.value=data.total

}




</script>

<style scoped>
.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
</style>